<template>
    <div>
     <Card>
       <Form ref='pageModel' :model="pageModel" label-position="right" inline :label-width='100'>
         <Row>
           <FormItem prop="videoTitle" label="视频名称">
             <Input v-model="pageModel.videoTitle" placeholder="请输入" clearable style="width:200px"></Input>
           </FormItem>
           <FormItem prop="score" label="视频分值">
             <Input v-model="pageModel.score" placeholder="请输入" clearable style="width:200px"></Input>
           </FormItem>
           <FormItem style="text-align: right">
             <Button @click="query" type="primary" class="m-l-sm">筛选</Button>
             <Button @click="reset" class="m-l-sm">重置</Button>
             <Button @click="add" type="primary" class="m-l-sm">新增</Button>
           </FormItem>
         </Row>
       </Form>
     </Card>
      <Card class="m-t-md">
        <Row>
          <Tabs type="card" @on-click="handleClick"	>
            <TabPane v-for="(item,index) in tabArr" :key="index" :label="item.label">
              <Table :loading="loading" :columns="tableColumn" stripe border :data="tableData"></Table>
              <page-temp class="m-t-md" :total="count" :current="pageModel.pageNo" :size="pageModel.pageSize" @changePage="changePage"></page-temp>
            </TabPane>
          </Tabs>
        </Row>
      </Card>
      <add-video :visible.sync="visible" :title="title" :content="content" @update="query" :isEdit="isEdit"></add-video>
    </div>
</template>

<script>
  import addVideo from '@/components/addVideo/addVideo.vue';
  import {queryPageByType,deleteVideos} from '@/api/video';
  import {examType,_examType,tabArr} from '@/libs/util.js';

  export default {
        components:{
          addVideo
        },
        data() {
            return {
              pageModel:{
                videoTitle:'',
                videoType:'1',
                pageNo: 1,
                score:null,
                pageSize: this.$config.PAGE_SIZE
              },
              type: examType,
              loading:false,
              tableColumn:[
                {
                  title: '排序',
                  key: 'sort'
                },
                {
                  title: '视频名称',
                  key: 'videoTitle'
                },
                {
                  title: '视频权限',
                  key: 'videoPermission',
                  render:(h,params) => {
                    return h(
                      "span", params.row.isMember === '1'?'会员':'非会员'
                    )
                  }
                },
                {
                  title: '视频分类',
                  key: 'videoType',
                  render:(h,params) => {
                    return h(
                      "span",
                      _examType(params.row.videoType)
                    )
                  }
                },
                {
                  title: '视频分值',
                  key: 'score'
                },
                {
                  title: '操作',
                  render: (h, params) => {
                    let self = this;
                    return h('div', [
                      h(
                        'Button',
                        {
                          props: {type: 'primary', size: 'small'},
                          style: {marginRight: "5px"},
                          on: {
                            click() {
                              self.title = '编辑视频';
                              self.visible = true;
                              self.content = params.row
                              self.isEdit = true
                            }
                          }
                        },
                        '编辑'
                      ),
                      h(
                        'Button',
                        {
                          props: {type: 'error', size: 'small'},
                          style: {marginRight: "5px"},
                          on: {
                            click() {
                              self.del(params.row)
                            }
                          }
                        },
                        '删除'
                      ),

                    ]);
                  }
                },
              ],
              tableData:[],
              count:0,
              visible: false,
              title:'',
              content:{},
              tabArr:tabArr,
              tab:'first',
              isEdit:false
            }
        },
        watch: {},
        computed: {},
        created() {
          this.query()
        },
        methods: {
          handleClick(name){
            this.pageModel.videoType = (name+1).toString();
            this.pageModel.pageNo = 1;
            this.pageModel.pageSize = this.$config.PAGE_SIZE;
            this.tableData = [];
            this.query()
          },
          query() {
            this.loading = true;
            queryPageByType(this.pageModel)
              .then(res => {
                this.loading = false;
                this.tableData = res.list || [];
                this.count = res.count
              })
              .catch(()=> {
                this.loading = false;
                this.tableData = [];
              })
          },
          reset() {
            this.$refs["pageModel"].resetFields();
            this.query()
          },
          // 分页
          changePage(pageNum) {
            this.pageModel.pageNo = pageNum;
            this.query();
          },
          add() {
              this.title = '新增视频';
              this.visible = true;
              this.isEdit = false;
              this.content = {};
          },
          del(row) {
            deleteVideos({ids:[row.id]})
              .then(res =>{
                this.query()
              })
          }

        }
    };
</script>
<style scoped>
  .ivu-form-item{
    margin-bottom: 0 !important;
  }
</style>
